const Todos = (props) => {
    let { todos, del, onCheck } = props;
    // console.log(todos)

    //点击checkbox的处理函数
    const handleCheckChange = (id, e) => {
        console.log(e.target.checked)
        //1.input勾选发生变化的时候,当前的数据的id传递给容器父组件进行处理

        //2.传递当前元素checked的值
        onCheck(id, e.target.checked)

    }
    //点击叉叉按钮的处理函数
    const handleClose = (target) => {
        // console.log(target)
        //将目标的id传给容器父组件
        del(target.id)
    }

    //根据todos数组中的数据,动态的创建li
    let lis = todos.map(todo => {
        let completedClassName = todo.completed ? 'completed' : ''
        return (
            <li key={todo.id} className={"todos-item " + completedClassName} >
                <div className="check">
                    <input type="checkbox" checked={todo.completed} onChange={(e) => {
                        handleCheckChange(todo.id, e)
                    }} />
                </div>
                <p className="content">{todo.content}</p>
                <div className='close'>
                    <b onClick={() => {
                        handleClose(todo)
                    }}>x</b>
                </div>
            </li >
        )
    })
    return (
        <ul className="todos" >
            {lis}
        </ul>
    )
}

export default Todos